<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="table.js"></script>
<title>Manage Batch</title>
<link rel="stylesheet" type="text/css" href="css/FinalProjectCSS.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-combined.min.css">
<script type="text/javascript" src="js/MasterJS.js"></script>
<script type="text/javascript">
	function flyToPage(task) {
		document.forms[0].task.value = task;
		document.forms[0].submit();
	}
	
	function datePickerScript(elmnt, id){
		//addDatePickerScript();
		
		var elmntId = '#'+ elmnt+id;
		$(elmntId).datetimepicker({
	        format: 'dd-MM-yyyy',
	        maskInput: true,
	        pickTime: false,
	        startDate: new Date()
	      });
	}
	
	function getDate(id,count){
		var tableList = document.getElementById("tableBatch"); //find table
		var rowList = tableList.getElementsByTagName("tr");
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length

		var startDate = rowList[parseInt(count)+1].children[1].children[0].children[0].value;
		var endDate = rowList[parseInt(count)+1].children[2].children[0].children[0].value;

		var arr = startDate.split('-');
		var date = arr[2]+'-'+arr[1]+'-'+arr[0];
		var strTime = new Date(date);
		
		arr = endDate.split('-');
		date = arr[2]+'-'+arr[1]+'-'+arr[0];
		var endTime = new Date(date);
		
		//document.getElementById('editStartDateInput'+id).value = document.getElementById('editStartDateText'+id).value;
		//document.getElementById('editEndDateInput'+id).value = document.getElementById('editEndDateText'+id).value;
		if(rowList[1] != null){
			rowList[parseInt(count)+1].children[1].children[1].children[0].value = rowList[parseInt(count)+1].children[1].children[0].children[0].value;
			rowList[parseInt(count)+1].children[2].children[1].children[0].value = rowList[parseInt(count)+1].children[2].children[0].children[0].value;
		
			var startDatePicker = '#startDatePicker'+id;
			var endDatePicker = '#endDatePicker'+id;
			$(startDatePicker).data('datetimepicker').setStartDate(strTime);
			$(endDatePicker).data('datetimepicker').setStartDate(endTime);
		}
	}
	
	var updateId = "";
	
	function loadUpdate(id,count){		
		getDate(id,count);
		if(updateId != ""){
			cancelUpdate(updateId);
		}
		hideInsertField();
		
		var editBatchNamePlace = document.getElementById("editBatchNameText" + id);
		var inputBatchNamePlace = document.getElementById("editBatchNameInput" + id);
		var editStartDatePlace = document.getElementById("editStartDateText" + id);
		var inputStartDatePlace = document.getElementById("startDatePicker" + id);
		var editEndDatePlace = document.getElementById("editEndDateText" + id);
		var inputEndDatePlace = document.getElementById("endDatePicker" + id);
		var editButton = document.getElementById('editButton'+id);
		var saveButton = document.getElementById('saveButton'+id);
		
		//set visible
		editBatchNamePlace.setAttribute("style", "display:none;");
		inputBatchNamePlace.setAttribute("style", "display:'';");		
		editStartDatePlace.setAttribute("style", "display:none;");
		inputStartDatePlace.setAttribute("style", "display:'';");
		editEndDatePlace.setAttribute("style", "display:none;");
		inputEndDatePlace.setAttribute("style", "display:'';");
		
		//loadUpdateButton(id);
		editButton.setAttribute("style", "display:none;");
		saveButton.setAttribute("style", "display:'';");
		
		updateId = id;
	}
	function hideInsertField(){
		document.forms[0].elements['modelBatch.batchName'].value="";
		document.forms[0].elements['modelBatch.startDate'].value="";
		document.getElementById('startDate').value="";
		document.getElementById('endDate').value="";
		document.forms[0].elements['modelBatch.endDate'].value="";
		/* document.getElementById('insertRow').style.display='none'; */
		hideInsertForm();
		document.getElementById('insertButton').style.display='';
	}
	function showFieldInsert(){
		if(updateId != ""){
			cancelUpdate(updateId);
		}
		document.getElementById('insertRow').style.display='';
		showInsertForm();
		//document.getElementById('insertButton').style.display='none';
	}
	function insert(){
		var strTime = document.getElementById('startDate');
		var endTime = document.getElementById('endDate');
		
		document.forms[0].elements['modelBatch.startDate'].value = strTime.value;
		document.forms[0].elements['modelBatch.endDate'].value = endTime.value;
		if (!validateForm(document.forms[0])) {
			return;
		}
		if(checkDate(strTime,endTime)==false){
			alert("End date cannot be less than start date!");
			return;
		}else{
			var r=confirm("Are you sure want to insert new batch?");
			if (r==true){
				flyToPage('insertBatch');
			}
		}
	}
	function cancelUpdate(id){
		if(id != "0"){
			var editBatchNamePlace = document.getElementById("editBatchNameText" + id);
			var inputBatchNamePlace = document.getElementById("editBatchNameInput" + id);
			var editStartDatePlace = document.getElementById("editStartDateText" + id);
			var inputStartDatePlace = document.getElementById("startDatePicker" + id);
			var editEndDatePlace = document.getElementById("editEndDateText" + id);
			var inputEndDatePlace = document.getElementById("endDatePicker" + id);
			var editButton = document.getElementById('editButton'+id);
			var saveButton = document.getElementById('saveButton'+id);
						
			//set visible
			editBatchNamePlace.setAttribute("style", "display:'';");
			inputBatchNamePlace.setAttribute("style", "display:none;");		
			editStartDatePlace.setAttribute("style", "display:'';");
			inputStartDatePlace.setAttribute("style", "display:none;");
			editEndDatePlace.setAttribute("style", "display:'';");
			inputEndDatePlace.setAttribute("style", "display:none;");
		
			editButton.setAttribute("style", "display:'';");
			saveButton.setAttribute("style", "display:none;");
			
			//cancelUpdateButton(id);
		}else{
			hideInsertField();
		}		
		updateId = "";
	}
	function submitUpdate(id,count){
		var tableList = document.getElementById("tableBatch"); //find table
		var rowList = tableList.getElementsByTagName("tr");
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length
		
		var editBatchNameInput = rowList[parseInt(count)+1].children[0].children[1].children[0].value;
		var editStartDateInput = document.getElementById("editStartDateInput"+id);
		var editEndDateInput = document.getElementById("editEndDateInput"+id);
		document.forms[0].elements['modelBatch.batchId'].value = id;
		document.forms[0].elements['modelBatch.batchName'].value = editBatchNameInput;
		document.forms[0].elements['modelBatch.startDate'].value = editStartDateInput.value;
		document.forms[0].elements['modelBatch.endDate'].value = editEndDateInput.value;
		if (!validateForm(document.forms[0])) {
			return;
		}
		if(editBatchNameInput==null||editBatchNameInput==""){
			alert("Batch name required");
			return;
		}else if(editStartDateInput.value==null||editStartDateInput.value==""){
			alert("Start date required");
			return;
		}else if(editEndDateInput.value==null||editEndDateInput.value==""){
			alert("End date required");
			return;
		}else{
			if(checkDate(editStartDateInput,editEndDateInput)==false){
				alert("End date cannot be less than start date!");
				return;
			}else{
				var r=confirm("Are you sure want to update batch?");
				if (r==true){
					flyToPage('updateBatchExe');
				}
			}
		}
		//flyToPage('updateBatch');
	}
	function checkDate(strTimeElmnt,endTimeElmnt){
		var strTime = strTimeElmnt.value;
		var endTime = endTimeElmnt.value;
		var arr = strTime.split('-');
		var day = arr[0];
		var month = arr[1];
		var date = month+'/'+day+'/'+arr[2];
		var time1 = new Date(date);
		
		arr = endTime.split('-');
		day = arr[0];
		month = arr[1];
		date = month+'/'+day+'/'+arr[2];
		var time2 = new Date(date);
		
		if(time1>=time2){
			return false;
		}
		return true;
	}
	function setEndDateBasedOnStartDate(e){
		$('#endDatePicker').data('datetimepicker').setLocalDate(e.localDate);
		$('#endDatePicker').data('datetimepicker').setStartDate(e.date);
	}
</script>
</head>
<html:javascript formName="eclassForm" dynamicJavascript="true" staticJavascript="true" method="validateForm" page="1"/>
<body onload="javascript:hideInsertField();" onkeydown="javascript:disableF5(event, 'batch');">
	<%
		if(session.getAttribute("result") != null)
		{
			String message = session.getAttribute("result").toString();
			%>
				<script type="text/javascript">
					window.alert('<%=message%>');
				</script>
			<%
			session.removeAttribute("result");
		}
	%>
	
	<center>
		<table width="100%" class="bodyTable boxShadow">
		
			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>
		
			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground">ACE Management > Manage Batch</td>
			</tr>
			<tr>
				<td align="center"  class="contentStyle"  style="padding: 5px 7px;"><br><br>
					<html:form action="/Eclass" method="post">
					<html:hidden property="task" name="eclassForm" />
					<html:hidden property="modelBatch.batchId" name="eclassForm" />
					<html:hidden property="modelBatch.startDate" name="eclassForm" />
					<html:hidden property="modelBatch.endDate" name="eclassForm" />
					<table id="tableBatch" border="0" width="95%" align="center" class="boxShadow  example table-autosort table-autofilter  table-autopage:10 table-stripeclass:alternate table-page-number:t1page table-page-count:t1pages table-filtered-rowcount:t1filtercount table-rowcount:t1allcount" id="t1">
						<thead>
							<!-- <tr>
								<th colspan="5" align="center">Batch List</th>
							</tr> -->
							<tr align="center" class="headerBox formHeaderBackground">
								<th colspan="2" align="center" class="formListStyle table-filterable table-sortable:default" style="padding:7px 13px;">Batch Name</th>
								<th align="center" class="formListStyle">Start Date</th>
								<th align="center" class="formListStyle">End Date</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							<%int count = -1; %>
							<logic:notEmpty name="eclassForm" property="listBatch">
								<logic:iterate id="listData" name="eclassForm" property="listBatch">
								<%count++; %>
									<tr class="formListBackground">
										<td colspan="2" align="center" class="formListStyle">
											<div id="editBatchNameText<bean:write name="listData" property="batchId" />"><bean:write name="listData" property="batchName" /></div>
											<div id="editBatchNameInput<bean:write name="listData" property="batchId" />" style="display:none;">
												<input type="text" value='<bean:write name="listData" property="batchName"/>'/>
											</div>
										</td>
										<td align="center" class="formListStyle">
											<div id="editStartDateText<bean:write name="listData" property="batchId" />">
												<input type="hidden" id="editStartDateVal<bean:write name="listData" property="batchId" />" value="<bean:write name="listData" property="startDate" />">
												<bean:write name="listData" property="startDate" />
											</div>
											<div id="startDatePicker<bean:write name="listData" property="batchId" />" class="input-append" style="display:none;">
												<input type="text" id="editStartDateInput<bean:write name="listData" property="batchId" />" data-format="dd-MM-yyyy" readonly="readonly"/>
												 <span class="add-on" style="height:12px;">
											      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
											    </span>
											</div>
											<div></div>
											<%if(count == 0){%>
											<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
											<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
											<script type="text/javascript" src="js/bootstrap.min.js"></script>
											<%} %>
											<script type="text/javascript">
 												datePickerScript('startDatePicker','<bean:write name="listData" property="batchId" />');
 										    </script>
										</td>
										<td align="center" class="formListStyle">
											<div id="editEndDateText<bean:write name="listData" property="batchId" />">
												<input type="hidden" id="editEndDateVal<bean:write name="listData" property="batchId" />" value="<bean:write name="listData" property="endDate" />">
												<bean:write name="listData" property="endDate" />
											</div>
											<div id="endDatePicker<bean:write name="listData" property="batchId" />" class="input-append" style="display:none;">
												<input type="text" id="editEndDateInput<bean:write name="listData" property="batchId" />" data-format="dd-MM-yyyy" readonly="readonly"/>
												<span class="add-on" style="height:12px;">
											      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
											    </span>
											</div>
											<script type="text/javascript">
												datePickerScript('endDatePicker','<bean:write name="listData" property="batchId" />');
 										    </script>
										</td>
										<td align="center" class="formListStyle">
											<span id='editButton<bean:write name="listData" property="batchId"/>'>
												<img src="images/editButton.png" title="update" style="cursor: pointer;" onclick="javascript:loadUpdate('<bean:write name="listData" property="batchId" />','<%=count%>');">
											</span>
											<span id='saveButton<bean:write name="listData" property="batchId"/>' style="display:none;">
												<img src="images/saveButton.png" title="save" style="cursor: pointer;" onclick="javascript:submitUpdate('<bean:write name="listData" property="batchId"/>','<%=count%>');"/>
												&nbsp;
												<img src="images/cancelButton.png" title="cancel" style="cursor: pointer;" onclick="javascript:cancelUpdate('<bean:write name="listData" property="batchId"/>');"/>
											</span>
										</td>
									</tr>
								</logic:iterate>
							</logic:notEmpty>
							<logic:empty name="eclassForm" property="listBatch">
								<tr>
									<td colspan="5">Data Empty</td>
								</tr>
							</logic:empty>
						</tbody>
						<tfoot>
							<tr class="headerBox formHeaderBackground">
								<td width="75px" class="table-page:previous formListStyle" style="cursor:pointer;">&lt;&lt; Previous</td>
								<td colspan="3" style="text-align:center; vertical-align: middle;">Page <span id="t1page"></span>&nbsp;of <span id="t1pages"></span></td>
								<td width="55px" align="right" class="table-page:next formListStyle" style="cursor:pointer;">Next &gt;&gt;</td>
							</tr>
							<tr id="insertRow" class="greyBackground" align="center" style="display:none;">
								<td colspan="2" class="formListStyle"><html:text name="eclassForm" property="modelBatch.batchName" /></td>
								<td id="datePicker" class="formListStyle">
									<div id="startDatePicker" class="input-append">
									    <input  type="text" id="startDate" data-format="dd-MM-yyyy" readonly="readonly"></input>
									    <span class="add-on" style="height:12px;">
									      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
									    </span>
									</div>
<!-- 											<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> -->
<!-- 											<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script> -->
<!-- 											<script type="text/javascript" src="js/bootstrap.min.js"></script> -->
									<script type="text/javascript">
								      $('#startDatePicker').datetimepicker({
								        format: 'dd-MM-yyyy',
								        maskInput: true,
								        pickTime: false,
								        startDate: new Date()
								      });
								      $('#startDatePicker').datetimepicker().on('changeDate', function(e) {
										setEndDateBasedOnStartDate(e);
									  });
								    </script>
								</td>
								<td id="datePicker" class="formListStyle">
									<div id="endDatePicker" class="input-append">
									    <input  type="text" id="endDate" data-format="dd-MM-yyyy" readonly="readonly"></input>
									    <span class="add-on" style="height:12px;">
									      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
									    </span>
									</div>
									<script type="text/javascript">
								      $('#endDatePicker').datetimepicker({
								        format: 'dd-MM-yyyy',
								        maskInput: true,
								        pickTime: false,
								        startDate: new Date()
								      });
								    </script>
								</td>
								<td align="center" class="formListStyle">
									<span>
										<img src="images/saveButton.png" id="insertBtn" title="Submit" style="cursor: pointer;" onclick="javascript:insert();"/>
										&nbsp;
										<img src="images/cancelButton.png" id="cancelBtn" title="Cancel" style="cursor: pointer;" onclick="javascript:hideInsertField();"/>
									</span>
								</td>
							</tr>
							<tr>
								<td colspan="5" id="insertButton" title="add new" align="center" class="greyBackground">						
									<div class="insertButtonGridStyle" onclick="javascript:showFieldInsert();">
										<table>
											<tr>
												<td class="formListStyle"><img src="images/addButton.png"></td>
												<td class="formListStyle"><b>Add Batch</b></td>
											</tr>
										</table>
									</div>									
								</td>
							</tr>
							<tr class="headerBox formHeaderBackground">
								<td colspan="5" align="center" style="padding:5px 7px;"><span id="t1filtercount"></span>&nbsp;of <span id="t1allcount"></span>&nbsp;rows match filter(s)</td>
							</tr>
						</tfoot>
					</table>
					</html:form><br>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2013. All Rights Reserved.</td>
			</tr>
		</table>
	</center>
</body>
</html>